<template>
  <div class="task">
    <div class="title">任务数据</div>

    <TaskType v-model="store.task.taskType" @change="store.switchTaskType" />
    <TaskList v-model="store.task.taskCode" :tasks="store.task.list" v-loading="store.task.loading" />

    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handlePageChange"
      v-model:current-page="store.task.page" v-model:page-size="store.task.pageSize" layout="total, prev, pager, next, "
      :total="store.task.total" />
  </div>
</template>
<script setup>
import TaskType from './TaskType.vue'
import TaskList from './TaskList.vue'

const { store } = inject('/home')

const handleSizeChange = () => {
  store.getTasks()
}

const handlePageChange = () => {
  store.getTasks()
}
</script>
<style lang="scss" scoped>
.task {
  flex: 1;
  overflow: hidden;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
}

.title {
  margin-bottom: 16px;
  color: #252a30;
  font-size: 20px;
  font-weight: 600;
}

.pagination {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
</style>
